<link rel="stylesheet" href="/assets/home/city/css/city-picker.css">
<link rel="stylesheet" href="/assets/home/css/profile.css">
<!-- <link href="/assets/home/css/myycenter.css" rel="stylesheet" /> -->

<script src="/assets/home/city/js/city-picker.data.min.js"></script>
<script src="/assets/home/city/js/city-picker.min.js"></script>
<!-- 头部 -->
<div class="top_div" style="background-image: url('/assets/home/images/bac.jpg');">
    <!-- <img src="/assets/home/images/bac.jpg" class="top_img"> -->
    <div class="userInfo">
        {if !empty($data['avatar'])}
        <img id="ava" class="uPic" src="{$data['avatar']}" /><br />
        {else /}
        <img id="ava" class="uPic" src="/assets/home/images/avatar.jpg" /><br />
        {/if}
        <span class="uBalance" style="">{$data['nickname']}</span>
    </div>
</div>

<div class="form">
    <!-- 表单提交，有文件上传要设置enctype -->
    <form method="post" enctype="multipart/form-data">
        <div class="item">
            <div class="title">
                昵称：
            </div>
            <input type="text" name="nickname" placeholder="请输入昵称" value="{$data['nickname']}">
        </div>
        <div class="item">
            <div class="title">
                手机号码：
            </div>
            <input type="text" readonly name="mobile" placeholder="请输入手机号码" value="{$data['mobile']}">
        </div>
        <div class="item">
            <div class="title">
                邮箱：
            </div>
            <input type="text" name="email" placeholder="请输入邮箱" value="{$data['email']}">
        </div>
        <div class="item">
            <div class="title">
                登录密码：
            </div>
            <input type="password" name="password" placeholder="请输入登录密码">
        </div>
        <div class="item">
            <div class="title">
                性别：
            </div>
            <div class="sex">
                <input type="radio" name="gender" value="0" id="secrecy" {$data['gender']=='0' ? 'checked' : '' }><label
                    for="secrecy">保密</label>
                <input type="radio" name="gender" value="1" id="man" {$data['gender']=='1' ? 'checked' : '' }><label
                    for="man">男</label>
                <input type="radio" name="gender" value="2" id="woman" {$data['gender']=='2' ? 'checked' : '' }><label
                    for="woman">女</label>
            </div>
        </div>
        <div class="item">
            <div class="title">
                地区选择：
            </div>
            <div style="position:relative;width: 80%;">
                <input id="city" readonly type="text" data-toggle="city-picker" name="region"
                    value="{$data.district}" />
            </div>
        </div>
        <div class="item">
            <input type="file" name="avatar" id="avatar">
        </div>
        <input type="submit" value="修改资料">
    </form>
</div>

<script>
    // 模拟点击
    $("#ava").click(function () {
        $("#avatar").click();
    })

    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }
    // 修改图片的预览效果
    $("#avatar").change(function(){
        var file=$(this)[0].files[0]
        if(file)
        {
            var url=GetObjectURL(file)
            $("#ava").attr('src',url)
        }
    })
</script>